<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hi,{{name}}</h1>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo1">
        <input type="text" placeholder="按下回车提示输入" @keyup.s="showInfo1">
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo1">
    </div>
</body>
    <script type="text/javascript">
        Vue.config.keyCodes.huiche=13
        const vm = new Vue({
            el:'#root',
            data:function(){
                return{
                    name:'trentwu'
                }
            },
            methods:{
                showInfo(e){
                    //console.log(e.target.value);
                    //if(e.keyCode!==13) return //==.enter
                    console.log(e.target.value);
                },
                showInfo1(e){
                    console.log(e.key,e.keyCode);//CapsLock=caps-lock
                    //1、tab必须配合keydown使用
                    //2、ctrl\alt\shift\meta
                    // 1）配合keyup使用：按下修饰键的同时，按下其他键，随后释放其他键，事件才会触发
                    // 2）配合keydown使用：正常触发
                    //3、Vue.config.keyCodes.自定义键名=键码，可以定制按键别名
                }
            }
        })
    </script>
</html>